<template>
  <div class="fullscreenContainer">
    <el-tooltip
      effect="light"
      :content="$t('message.tooltips.screenView')"
      placement="top"
    >
      <div class="item btn xmind-iconfont iconquanping" @click="toFullscreenShow"></div>
    </el-tooltip>
    <el-tooltip
      v-if="!isRead"
      effect="light"
      :content="$t('message.tooltips.screenEdit')"
      placement="top"
    >
      <div class="item btn xmind-iconfont iconquanping1" @click="toFullscreenEdit"></div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
import { fullscrrenEvent, fullScreen } from "./fullScreen/index";
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({
  mindMap: {
    type: Object,
  },
  isRead:{
    type:Boolean,
    default:false
  }
})

onMounted(()=>{
  document[fullscrrenEvent] = (e) => {
    setTimeout(() => {
      props.mindMap.resize();
    }, 1000);
  };
})

 // 全屏查看
function toFullscreenShow() {
  fullScreen(props.mindMap.el)
}

// 全屏编辑
function toFullscreenEdit() {
  fullScreen(document.body)
}
</script>
<style lang="scss" scoped>
.fullscreenContainer {
  display: flex;
  align-items: center;

  &.isDark {
    .btn {
      color: hsla(0,0%,100%,.6);
    }
  }

  .item {
    margin-right: 12px;

    &:last-of-type {
      margin-right: 0;
    }
  }

  .btn {
    cursor: pointer;
    padding: 0px !important;
  }
}
</style>